function photo() {
    var news = [
        {
            classId: 1,
            name: '岁月',
            img: 'img/37.jpg',
            href: 'years.html',
            body: '哪知岁月总是催人老，等到知时已迟了'
        },
        {
            classId: 2,
            name: '风景',
            href: 'scenery.html',
            img: 'img/38.jpg',
            body: '再美的风景，也需要欣赏它的人'
        },
        {
            classId: 3,
            name: '旅游日记',
            href: 'diary.html',
            img: 'img/39.jpg',
            body: '旅游重要的不是重点，而是过程'
        },
        {
            classId: 4,
            name: '相爱的人',
            href: 'love.html',
            img: 'img/40.jpg',
            body: '犹如黑暗中的烛光，照亮了整个人类的历史'
        },
        {
            classId: 5,
            name: '建筑',
            href: 'architecture.html',
            img: 'img/41.jpg',
            body: '不同的外形，相同的内在'
        },
        {
            classId: 6,
            name: '神奇的自然',
            href: 'nature.html',
            img: 'img/42.jpg',
            body: '有一种神奇叫做孤独的孕育'
        }
    ]
    var conter = [
        {
            id: 1,
            classId: 1,
            title: "岁月",
            time: "发布日期：2017-06-02",
            item1: "客户：你看这个logo放大的同时能不能缩小一点设计师：……你说啥？",
            item2: "客户：我感觉这个大小不合适，整体大一点，占面积小一点",
            item3: "设计师：……你说啥？",
            item4: "客户：TM到底能不能干了",
            item5: "设计师：我能力有限。。。",
            img1: "img/43.jpg",
            img1: "img/44.jpg",
            img1: "img/45.jpg"
        },
        {
            id: 2,
            classId: 2,
            title: "风景",
            time: "发布日期：2017-06-02",
            item1: '设计师"高考"真题，你能那几分？',
            item2: "Q：你花了一整天的时间，绞尽脑汁，终于做出一张极其满意的Banner图，发给客户75秒后，收到一段长达60秒的语音反馈，言辞激烈。作为设计师，此时你应该怎么做？",
            item3: "A：准备重做。",
            item4: "Q：快到下班时间了，公司准备聚餐的同事分成了两拨，一拨准备去吃烤肉，另一拨准备去吃火锅，此时，你应该怎么做？",
            item5: "A：泡上一杯咖啡，正式开始一天的工作。",
            item6: "Q：你的女朋友给你发微信说，她大姨的二舅的外甥的侄女准备新开一家奶茶店，想让你帮忙免费设计一款logo，此时你应该怎么做？",
            item7: "A：一巴掌抽醒自己，设计师哪儿来的女朋友",
            img1: "img/46.jpg",
            img1: "img/47.jpg",
            img1: "img/48.jpg"
        },
        {
            id: 3,
            classId: 3,
            title: "相爱的人",
            time: "发布日期：2017-06-02",
            item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
            item2: "面试官：面试设计师的？",
            item3: "求职者：嗯嗯",
            item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
            item5: "②",
            item6: "面试官：作为设计师，你有什么特长吗？",
            item7: "求职者：我会一些手绘",
            item8: "面试官：手绘？会画符咒吗？",
            item9: "求职者：符……符咒？",
            item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
            item11: "求职者：我是设计师，不是萨满法师……",
            item12: "③",
            item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
            item14: "求职者：……",
            img1: "img/49.jpg",
            img1: "img/50.jpg",
            img1: "img/51.jpg"
        },
        {
            id: 4,
            classId: 4,
            title: "建筑",
            time: "发布日期：2017-06-02",
            item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
            item2: "面试官：面试设计师的？",
            item3: "求职者：嗯嗯",
            item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
            item5: "②",
            item6: "面试官：作为设计师，你有什么特长吗？",
            item7: "求职者：我会一些手绘",
            item8: "面试官：手绘？会画符咒吗？",
            item9: "求职者：符……符咒？",
            item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
            item11: "求职者：我是设计师，不是萨满法师……",
            item12: "③",
            item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
            item14: "求职者：……",
            img1: "img/52.png",
            img1: "img/53.jpg",
            img1: "img/54.jpg"
        },
        {
            id: 5,
            classId: 5,
            title: "建筑",
            time: "发布日期：2017-06-02",
            item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
            item2: "面试官：面试设计师的？",
            item3: "求职者：嗯嗯",
            item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
            item5: "②",
            item6: "面试官：作为设计师，你有什么特长吗？",
            item7: "求职者：我会一些手绘",
            item8: "面试官：手绘？会画符咒吗？",
            item9: "求职者：符……符咒？",
            item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
            item11: "求职者：我是设计师，不是萨满法师……",
            item12: "③",
            item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
            item14: "求职者：……",
            img1: "img/55.png",
            img1: "img/56.jpg",
            img1: "img/57.jpg"
        },
        {
            id: 6,
            classId: 6,
            title: "神奇的自然",
            time: "发布日期：2017-06-02",
            item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
            item2: "面试官：面试设计师的？",
            item3: "求职者：嗯嗯",
            item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
            item5: "②",
            item6: "面试官：作为设计师，你有什么特长吗？",
            item7: "求职者：我会一些手绘",
            item8: "面试官：手绘？会画符咒吗？",
            item9: "求职者：符……符咒？",
            item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
            item11: "求职者：我是设计师，不是萨满法师……",
            item12: "③",
            item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
            item14: "求职者：……",
            img1: "img/58.png",
            img1: "img/59.jpg",
            img1: "img/60.jpg"
        }
    ]

    function initNews(arr) {
        if (typeof arr === 'undefined') {
            // 数组切割，保留原来数组内容，并不是真的切掉
            arr = news.slice();
            arr.length = 6
        }
        var oNews = document.getElementById('paging');
        oNews.innerHTML = ''
        for (index = 0; index < arr.length; index++) {
            var item = arr[index];
            var oLi = document.createElement('li')
            // var oDiv = oLi.getElementsByClassName('div')
            oLi.id = item.classId
            // console.log(oLi);
            oLi.innerHTML += `<div><div class="box-1"><a><img src="${item.img}" alt=""></a></div><div class="box-2"><a href="${item.href}"><span>${item.name}</span></a><p>${item.body}</p></div></div>`
            oLi.onclick = function () {
                // console.log(this.id);
                // debugger
                // alert(`${item.href}?id=123`)
                window.location.href = `years.html?id=${this.id}`
            }

            oNews.appendChild(oLi)
            //  给新建的li添加开始动画
            // var clientHeight = document.documentElement.clientHeight
            // document.onscroll = function(){
            //     for(index = 0; index< oLi.length; index++){
            // 	    var al = oLi[index];
            // 	    // console.log(el)
            // 	    if(al.getBoundingClientRect().top<clientHeight){
            // 		    al.classList.add('animated')
            // 		    al.classList.add('bounceInUp')
            // 	    }
            //     }
            // }
        }

    }
    // initNews()

    function inConter() {
        var oConter = document.getElementById('years-box');
        var pot = location.search.search('=')
        var webClass = location.search.substring(pot + 1)
        for (index = 0; index < conter.length; index++) {
            var item = conter[index];
            var oDiv = document.createElement('div')
            // console.log(item.classId,webClass);
            oDiv.innerHTML =''
            if (item.classId == webClass) {
                oDiv.innerHTML += `<div class="years-top">${item.title}</div>`
                oDiv.innerHTML += `<div class="years-head">${item.time}</div>`
                // oDiv.innerHTML += `<div class="years-main"><div 6class="main-top" id="main-top"><ul class="classType"><li>${item.item1}</li><li>${item.item2}</li><li>${item.item3}</li><li>${item.item4}</li><li>${item.item5}</li></ul></div><div class="main-low"><ul><li>${item.item6}</li><li>${item.item7}</li><li>${item.item8}</li><li>${item.item9}</li><li>${item.item10}</li><li>${item.item11}</li></ul></div></div>`

            }
            // var oUl = document.createElement('ul')
            // var oLi = document.createElement('li')



            oConter.appendChild(oDiv)
            // oDiv.appendChild(oUl)
            // oUl.appendChild(oLi)

        }


    }
    inConter()
}
photo()
